<template>
  <div class="list">
    <template v-if="mold === 'thumbnail'">
      <ul class="home-item">
        <li v-for="item in items">
          <div class="home-item-top">
            <img class="home-item-right" src="../assets/1.jpg" alt="">
            <div class="home-item-left">
              <h2>teamLab：花舞森林与未来游乐园{{ item }}</h2>
              <p>2017年5月20日至10月10日，teamLab即将在佩斯</p>
            </div>
          </div>
          <div class="home-item-bot">
            展览
          </div>
        </li>
      </ul>
    </template>
    <template v-if="mold === 'basic'">
      basic
    </template>
  </div>
</template>
<script>
export default {
  name: 'list',
  props: {
    mold: {
      type: String,
      default: 'thumbnail'
    },
    items: {
      type: Array,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
  .home-item{
    padding-left:1.8rem;
    li{
      padding:2.5rem 1.8rem 2.5rem 0;
      border-bottom:1px solid #e3e3e3;
    }
    .home-item-top{
      overflow: hidden;
      margin-bottom:1rem;
      .home-item-right{
        float:right;
        width:7rem;
        height:8.6rem;
        padding-left:2.5rem;
      }
      p{
        line-height:1.5;
        color:#aaa;
      }
    }
    .home-item-bot{
      color:#ccc;
    }
  }
</style>
